<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <el-header class="home-header">
      <div class="logo">
        <img src="" alt="平台 logo">
        <span>动物健康检测与交流平台</span>
      </div>
      <el-menu mode="horizontal" class="nav-menu">
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">宠物中心</el-menu-item>
        <el-menu-item index="3">交流中心</el-menu-item>
        <el-menu-item index="4">个人中心</el-menu-item>
      </el-menu>
      <el-button type="primary" class="login-btn">登录</el-button>
    </el-header>

    <!-- 轮播图 -->
    <el-carousel class="home-carousel" height="500px">
      <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
        <img :src="item" alt="轮播图">
        <div class="carousel-text">
          <h2>{{ carouselTitles[index] }}</h2>
          <p>{{ carouselDescriptions[index] }}</p>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 功能介绍 -->
    <el-main class="home-main">
      <div class="feature-section">
        <h2>平台特色功能</h2>
        <div class="feature-cards">
          <el-card class="feature-card" shadow="hover">
            <div class="icon">
              <i class="fas fa-vial"></i>
            </div>
            <h3>健康检测</h3>
            <p>为您的宠物提供全面的健康检测服务，及时了解宠物健康状况。</p>
          </el-card>
          <el-card class="feature-card" shadow="hover">
            <div class="icon">
              <i class="fas fa-comments"></i>
            </div>
            <h3>社区交流</h3>
            <p>与其他宠物主人交流养宠经验，分享宠物趣事。</p>
          </el-card>
          <el-card class="feature-card" shadow="hover">
            <div class="icon">
              <i class="fas fa-user-md"></i>
            </div>
            <h3>专家咨询</h3>
            <p>获取专业的宠物健康知识和建议，解决您的养宠难题。</p>
          </el-card>
          <el-card class="feature-card" shadow="hover">
            <div class="icon">
              <i class="fas fa-book-open"></i>
            </div>
            <h3>健康百科</h3>
            <p>丰富的宠物健康知识百科，助您成为养宠达人。</p>
          </el-card>
        </div>
      </div>

      <!-- 热门资讯 -->
      <div class="news-section">
        <h2>热门资讯</h2>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(news, index) in hotNews" :key="index">
            <el-card class="news-card" shadow="hover">
              <img :src="news.image" alt="资讯图片">
              <div class="news-content">
                <h3>{{ news.title }}</h3>
                <p>{{ news.description }}</p>
                <el-button type="text">查看详情</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-main>

    <!-- 页脚 -->
    <el-footer class="home-footer">
      <p>版权所有 &copy; 2024 动物健康检测与交流平台</p>
      <p>联系方式：info@example.com</p>
    </el-footer>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      carouselImages: [
        'https://via.placeholder.com/1920x500?text=Carousel+Image+1',
        'https://via.placeholder.com/1920x500?text=Carousel+Image+2',
        'https://via.placeholder.com/1920x500?text=Carousel+Image+3'
      ],
      carouselTitles: [
        '关爱宠物健康，从这里开始',
        '与宠物主人一起分享快乐',
        '获取专业的宠物健康建议'
      ],
      carouselDescriptions: [
        '为您的宠物提供一站式健康检测与交流服务',
        '加入我们的社区，结识更多爱宠人士',
        '专业的宠物专家为您答疑解惑'
      ],
      hotNews: [
        {
          image: 'https://via.placeholder.com/300x200?text=News+Image+1',
          title: '宠物夏季健康小贴士',
          description: '夏季天气炎热，宠物容易出现各种健康问题，快来看看这些小贴士吧。'
        },
        {
          image: 'https://via.placeholder.com/300x200?text=News+Image+2',
          title: '宠物训练的有效方法',
          description: '想要让您的宠物听话又可爱？这些训练方法不容错过。'
        },
        {
          image: 'https://via.placeholder.com/300x200?text=News+Image+3',
          title: '常见宠物疾病的预防',
          description: '了解常见宠物疾病的预防措施，让您的宠物健康成长。'
        }
      ]
    };
  }
};
</script>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.home-header {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.logo span {
  font-size: 24px;
  font-weight: bold;
}

.nav-menu {
  border-bottom: none;
}

.login-btn {
  border-radius: 20px;
}

.home-carousel {
  position: relative;
}

.home-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 1;
}

.carousel-text h2 {
  font-size: 48px;
  margin-bottom: 20px;
}

.carousel-text p {
  font-size: 24px;
}

.home-main {
  padding: 50px;
  flex: 1;
}

.feature-section {
  text-align: center;
  margin-bottom: 50px;
}

.feature-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.feature-card {
  width: 250px;
  text-align: center;
  padding: 30px;
}

.feature-card .icon {
  font-size: 48px;
  margin-bottom: 20px;
  color: #409eff;
}

.news-section {
  text-align: center;
}

.news-card {
  height: 100%;
}

.news-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.news-content {
  padding: 20px;
}

.news-content h3 {
  margin-bottom: 10px;
}

.home-footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
}
</style>